---
type: tutorial
title: Style your About page
description: |-
  Tutorial: Build your first Astro blog —
  Add an Astro style tag for scoped styling on the page
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Now that you have an About page with content about you, it's time to style it!

<PreCheck>
  - Style items on a single page
  - Use CSS variables
</PreCheck>


## Style an individual page

Using Astro's own `<style></style>` tags, you can style items on your page. Adding **attributes** and **directives** to these tags gives you even more ways to style.

<Steps>
1. Copy the following code and paste it into `src/pages/about.astro`:

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head> 

    ```

    Check all three pages in your browser preview.
    
    - Which color is the page title of:

        - Your Home page?  <Spoiler>black</Spoiler>
        - Your About page? <Spoiler>purple</Spoiler>
        - Your Blog page? <Spoiler>black</Spoiler>

    - The page with the biggest title text is? <Spoiler>Your About page</Spoiler>

    :::tip
    If you are unable to determine colors visually, you can use the dev tools in your browser to inspect the `<h1>` title elements and verify the text color applied.
    :::

2. Add the class name `skill` to the generated `<li>` elements on your About page, so you can style them. Your code should now look like this:

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>My skills are:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. Add the following code to your existing style tag:

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```



  4. Visit your About page in your browser again, and verify, through visual inspection or dev tools, that each item in your list of skills is now green and bold.
</Steps>

## Use your first CSS variable
The Astro `<style>` tag can also reference any variables from your frontmatter script using the `define:vars={ {...} }` directive. You can **define variables within your code fence**, then **use them as CSS variables in your style tag**.

<Steps>
1. Define a `skillColor` variable by adding it to the frontmatter script of `src/pages/about.astro` like this:

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "About Me";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Technical Writer",
      hobbies: ["photography", "birdwatching", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

    const happy = true;
    const finished = false;
    const goal = 3;
  
    const skillColor = "crimson";
    ---
    ```

2. Update your existing `<style>` tag below to first define, then use this `skillColor` variable inside double curly braces.

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}> 
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. Check your About page in your browser preview. You should see that the skills are now crimson red, as set by the `skillColor` variable passed to the `define:vars` directive.
</Steps>

<Box icon="puzzle-piece">

## Try it yourself - Define CSS variables
 
<Steps>
 1. Update the `<style>` tag on your About page so that it matches the one below. 

    ```astro title="src/pages/about.astro"
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
    ```
 
 2. Add any missing variable definitions in your frontmatter script so that your new `<style>` tag successfully applies these styles to your list of skills:
    - The text color is crimson red
    - The text is bold
    - The list items are in all-caps (all uppercase letters)
</Steps>
<details>
<summary>✅ Show me the code! ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] I can add CSS styles to an individual page using an Astro `<style>` tag.
- [ ] I can use variables to style elements on the page.
</Checklist>
</Box>

### Resources
- [Astro syntax vs JSX - comparison](/en/reference/astro-syntax/#differences-between-astro-and-jsx)

- [Astro `<style>` tag](/en/guides/styling/#styling-in-astro)

- [CSS variables in Astro](/en/guides/styling/#css-variables)



